import React, { Component } from "react";
// input组件
class Input extends Component {
  // 可以通过constructor创建state
  constructor() {
    super();
    this.state = {
      value: "",
      arr: [],
    };
  }

  SendMsg = () => {
    if (this.state.value) {
      this.props.onGetArr({ list: this.state.value, id: new Date().getTime() });
      this.setState({ value: "" });
    }
  };
  KeySendMsg = (e) => {
    if (e.keyCode === 13 && this.state.value) {
      this.props.onGetArr({ list: this.state.value, id: new Date().getTime() });
      this.setState({ value: "" });
    }
  };
  // 柯里化函数
  GetInputValue = () => {
    return (e) => {
      this.setState({ value: e.target.value });
    };
  };
  render() {
    return (
      <>
        <div className="box">
          <h3>ToDoList</h3>
          <input
            className="input"
            type="text"
            // 受控组件
            value={this.state.value}
            onChange={this.GetInputValue()}
            onKeyUp={this.KeySendMsg}
          />
          <button onClick={this.SendMsg}>发送</button>
        </div>
      </>
    );
  }
}
export default Input;
